<template>
    <div>
        <div class="fixed-bar">
            <div class="item-title">
                <div class="subject">
                    <h3>{{breadCrumbs.title.h3?breadCrumbs.title.h3:"暂无分类"}}</h3>
                    <h5>{{breadCrumbs.title.h5?breadCrumbs.title.h5:"暂无说明"}}</h5>
                </div>
                <ul class="tab-base nc-row" v-if="breadCrumbs.title.childrenBar.length">
                    <li><a href="javascript:void(0)" class="current"><span>网站信息</span></a></li>
                    <li><a href="javascript:void(0)"><span>基本设置</span></a></li>
                </ul>
            </div>
        </div>

        <div class="explanation" id="explanation">
            <div class="title" id="checkZoom">
                <i class="fa fa-lightbulb-o"></i>
                <h4 title="提示相关设置操作时应注意的要点">操作提示</h4>
                <span id="explanationZoom" title="收起提示"></span>
            </div>
            <ul>
                <li v-for="key in breadCrumbs.prompt">{{key}}</li>
            </ul>
        </div>

    </div>
</template>

<script>

    export default {
        props:['breadCrumbs'],
        data() {
            return {

            }
        },
        beforeCreate(){

        },
        methods:{

        },
        created(){

        },
        mounted(){
            this.$nextTick(res=>{

                $("#checkZoom").click(res=>{

                    let explanationDom=$('#explanation');
                    let explanationHeight=explanationDom.height();

                    let animateObj
                    if (explanationHeight==20) {
                        explanationDom.animate({
                            color: "#2CBCA3",
                            backgroundColor: "#EDFBF8",
                            width: "99%",
                            height: "20",
                        },300,function() {
                            $(this).css('height', '100%');
                        });
                    }else {
                        explanationDom.animate({
                            color: "#FFF",
                            backgroundColor: "#4FD6BE",
                            width: "80",
                            height: "20",
                        },300);
                    }

                })
            })

        }

    }
</script>

<style lang="scss">
    //导航的css
    .fixed-bar {
        background-color: #FFF;
        width: 100%;
        position: relative;
        z-index: 99;
    }

    .item-title {
        line-height: 20px;
        white-space: nowrap;
        width: 100%;
        padding-top: 3px;
        border-bottom: solid 1px #E6E6E6;
    }

    .item-title .subject {
        vertical-align: bottom;
        display: inline-block;

        min-width: 190px;
        height: 26px;
        padding: 6px 0;
        margin-right: 10px;
    }

    .item-title h3 {
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        color: #333;
        display: inline-block;
    }

    .item-title h5 {
        font-size: 12px;
        font-weight: normal;
        line-height: 18px;
        color: #777;
        display: inline-block;
        margin-left: 10px
    }

    .tab-base {
        vertical-align: bottom;
        display: inline-block;
    }

    .tab-base li {
        height: 35px;
        margin-right: 2px;
        display: inline-block ;
    }

    .tab-base a {
        line-height: 20px ;
        color: #777 ;
        background-color: #E6E6E6 ;
        display: block;
        height:20px ;
        padding: 7px 20px ;
        border: solid 1px #E6E6E6 ;
        border-radius: 5px 5px 0 0 ;
        cursor: pointer;
    }

    .tab-base a:hover {
        color: #333 ;
    }

    .tab-base a.current,
    .tab-base a:hover.current {
        font-size: 14px ;
        font-weight: 600 ;
        background-color: #FFF ;
        border-bottom-color: #FFF ;
        cursor: default ;
    }

    .item-title a.back {
        color: #999;
        display: inline-block;
        vertical-align: bottom;
        margin: 0 10px 6px 0;
    }

    .item-title a.back:hover {
        color: #4fc0e8;
    }

    .item-title a.back i {
        font-size: 40px;
    }





    /*注释说明帮助  */
    .explanation { color: #0ba4da !important; background-color: rgba(79, 192, 232, 0.11) !important; display: block;height: 100%; padding: 6px 9px; border-radius: 5px; position: relative; overflow: hidden; margin-top: 5px;  }
    .explanation:before{content: "";background-image: url(../../../assets/images/admin/fixedBar/wave.png); width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;border-radius: 5px;background-repeat: no-repeat;background-size: cover;}
    .explanation .title { white-space: nowrap; margin-bottom: 8px; position: relative; cursor: pointer;}
    .explanation .title h4 { font-size: 14px; font-weight: normal; line-height: 20px; height: 20px; display: inline-block; }
    .explanation .title i { font-size: 18px; vertical-align: middle; margin-right: 6px; }
    .explanation .title span { background: url(../../../assets/images/admin/fixedBar/combine_img.png) no-repeat -580px -200px; width: 20px; height: 20px; position: absolute; z-index: 1; top: -6px; right: -9px; }
    .explanation ul { color: #748A8F; margin-left: 10px; }
    .explanation li { line-height: 20px; background: url(../../../assets/images/admin/fixedBar/macro_arrow.gif) no-repeat 0 10px; padding-left: 10px; margin-bottom: 4px;  }








</style>
